<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <style>  
        * {  
            margin: 0;  
            padding: 0;  
        }  
          
        span {  
            display: inline-block;  
            margin-left: 30px;  
            width: 150px;  
            height: 40px;  
            background: #FFFFFF;  
            border-bottom: 2px solid #8A2BE2;  
            font: 16px/40px "微软雅黑";  
            text-align: center;  
            color: #000000;  
        }  
          
        span.current,  
        span:hover {  
            background: #8A2BE2;  
            color: #FFFFFF;  
        }  
          
        .hd {  
            height: 40px;  
        }  
          
        .bd {  
            height: 400px;  
            padding: 10px 30px;  
            font-size: 50px;  
        }  
          
        .bd>div {  
            display: none;  
        }  
          
        .bd .show {  
            display: block;  
        }  
    </style>  
    <script>  
        window.onload = function() {  
            var sp = document.getElementsByTagName("span");  
            var cons = document.querySelector(".bd").getElementsByTagName("div");  
            for(var i = 0; i < sp.length; i++) {  
                sp[i].index = i;  

                sp[i].onmouseover = function() {  
                    for(var j = 0; j < sp.length; j++) {  
                        sp[j].className = "";  
                        cons[j].className = "";  
                    }  
                    this.className = "current";  
                    cons[this.index].className = "show";  
                }  
            }  
        }  
    </script>  
</head>
<body>
    <div class="tab_box">  
        <div class="hd">  
            <span class="current">新闻</span>  
            <span>军事</span>  
            <span>房产</span>  
            <span>体育</span>  
            <span>娱乐</span>  
        </div>  
        <div class="bd">  
            <div class="show">我是骑车新闻</div>  
            <div>我是军事新闻</div>  
            <div>我是房产新闻</div>  
            <div>我是体育新闻</div>  
            <div>我是娱乐新闻</div>  
        </div>  
    </div>    
</body>
<script src="main.js"></script>
</html>